<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>时钟</title>
</head>
<style>
    /* div {
        text-align: center;
        margin-top: 150px;
    } */
</style>

<body>
    <div>
        <canvas id="canvas"></canvas>
    </div>
    <script>
        let canvas = document.getElementById('canvas');//获取画布
        let ctx = canvas.getContext('2d'); //获取canvas上下文
        var ww=window.innerWidth,
        wh=window.innerHeight;
      
        var ox=ww/2,oy=wh/2;
        var Clock=function(){

        }
        Clock.prototype={
            init:function(){
                canvas.width=ww;
                canvas.height=wh;
                ctx.translate(ox,oy);
                this.draw();
                this.update();
            },
            update:function(){
                var that=this
                setInterval(function(){
                    ctx.clearRect(0,0,ww,wh)
                    that.draw()
                },1000)
            },
            draw:function(){
                this.drawBoard();
                this.drawPin()
            },
            drawPin:function(){
                var d,h,m,s,hx,hy,mx,my,sx,sy
                d=new Date();
                h=Math.abs(d.getHours()-12);
                m=d.getMinutes();
                s=d.getSeconds();
                sx=Math.sin(s*(Math.PI/30))*240
                sy=-Math.cos(s*(Math.PI/30))*240
                line({x:0,y:0},{x:sx,y:sy},2,'#fff')
                mx=Math.sin((m+s/60)*(Math.PI/30))*240
                my=-Math.cos((m+s/60)*(Math.PI/30))*240
                line({x:0,y:0},{x:mx,y:my},6,'#fff')

                hx=Math.sin((h+m/60)*(Math.PI/6))*200
                hy=-Math.cos((h+m/60)*(Math.PI/6))*200
                line({x:0,y:0},{x:hx,y:hy},12,'#fff')
            },
            drawBoard:function(){
                // ctx.fillStyle="#eee";
                // ctx.arc(ox,oy,300,0,Math.PI*2,true)
                // ctx.fill();
                // ctx.fillStyle="#333";
                // ctx.arc(ox,oy,280,0,Math.PI*2,true)
                // ctx.fill();
                // //矩形
                // ctx.fillStyle="#eee";
                // ctx.fillRect(ox-150,oy-150,300,300);
                // ctx.fillStyle="#333";
                // ctx.fillRect(ox-140,oy-140,280,280)
               
                arc(0,0,300,"#aaa")
                arc(0,0,280,"#333")
                //叠加圆
                // ctx.save()
                // for(var i=0;i<30;i++){
                //     ctx.rotate(Math.PI/30);
                //     line({x:0,y:-270},{x:0,y:270},2,"#999")
                    
                // }
                // ctx.restore();
                // arc(0,0,260,"#333")
                // for(var i=0;i<6;i++){
                //     ctx.rotate(Math.PI/6);
                //     line({x:0,y:-270},{x:0,y:270},5,"#fff")
                // }
                // arc(0,0,250,"#333")
                //根据遍历 取出各刻度及所在索引角度
                var s={x:0,y:0},
                e={x:0,y:0};
                var w=0;
                 for(var i=0;i<60;i++){
                    s.x=Math.sin(i*Math.PI/30)*260
                    s.y=Math.cos(i*Math.PI/30)*260
                    e.x=Math.sin(i*Math.PI/30)*270
                    e.y=Math.cos(i*Math.PI/30)*270
                    w=i%5==0?5:2;
                    line(s,e,w,'#eee')
                }
            }
        }
        var clock=new Clock();
        clock.init();
        function arc(x,y,r,c){
            ctx.beginPath();
            ctx.arc(x,y,r,0,Math.PI*2,true)
            ctx.fillStyle=c;
            ctx.fill();
            ctx.closePath()
            
        }
        function line(s,t,w,c){
            ctx.beginPath();
            ctx.strokeStyle=c;
            ctx.lineWidth=w;
            ctx.moveTo(s.x,s.y);
            ctx.lineTo(t.x,t.y);
            ctx.stroke();
            ctx.closePath()
        }
    </script>
</body>

</html>